import classNames from "classnames";
import styles from "./index.module.scss";

export interface TitleProps {
  children?: React.ReactNode;
  leftExtra?: React.ReactNode;
  rightExtra?: React.ReactNode;
}

const Title = (props: TitleProps) => {
  const { children, leftExtra, rightExtra } = props;
  return (
    <div className={classNames(styles["mg-detail-title"])}>
      <div className={classNames(styles["mg-detail-title-text"])}>
        <span>
          {children}
          <span className={classNames(styles["mg-detail-title-extra-left"])}>
            {leftExtra}
          </span>
        </span>
        <span className={classNames(styles["mg-detail-title-extra-right"])}>
          {rightExtra}
        </span>
      </div>
    </div>
  );
};

export default Title;
